<template>
<div class="com-school-bar">
  <div class="title fr jc">每日学校人员分布统计</div>
  <div class="chart" ref="chart"></div>
</div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'com-school-bar',
  props: ['chartData'],
  data () {
    return {
      chart: null
    }
  },
  methods: {
    setOption () {
      const data = [...this.chartData].sort((a, b) => a.textname - b.textname).map(v => v.leijicount)
      this.chart.setOption({
        textStyle: {
          fontFamily: 'PingFangSC-Regular'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          padding: 10,
          borderRadius: 8,
          textStyle: {
            fontSize: 28
          },
          formatter: '{b}: {c}'
        },
        grid: {
          left: 56,
          right: 56,
          top: 24,
          bottom: 26,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, .1)',
              width: 3
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8AA6DB',
            fontSize: 28,
            margin: 6
          },
          data: ['学', '值', '访']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: ['rgba(255, 255, 255, .1)'],
              width: 3
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8AA6DB',
            fontSize: 28,
            margin: 28
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, .1)',
              width: 3
            }
          }
        },
        series: [
          {
            name: '每日学校人员分布统计',
            type: 'bar',
            barWidth: 40,
            data: [{
              name: '学',
              value: data[0],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#3DDBE8' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#08A8EA' // 100% 处的颜色
                  }]
                }
              }
            }, {
              name: '值',
              value: data[1],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#84E287' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#3ABA8F' // 100% 处的颜色
                  }]
                }
              }
            }, {
              name: '访',
              value: data[2],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#F89500' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#F7B500' // 100% 处的颜色
                  }]
                }
              }
            }]
          }
        ]
      })
    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.chart)
    this.setOption()
  },
  watch: {
    chartData () {
      this.setOption()
    }
  }
}
</script>

<style lang="less">
.com-school-bar {width: 920px;height: 410px;border: 4px solid #0BFFFE;
  .title {width: 100%; height: 80px;padding-top: 14px;font: 500 40px PingFangSC-Medium;color: #FFFFFF;background: url("../../../../assets/img/p：：位图_2@2x.png") center bottom/754px 6px no-repeat;}
  .chart {width: 912px;height: 322px;}
}
</style>
